<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-03 22:57:27
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-29 00:27:17
 * @FilePath: /chat-ai-plus/src/pages/app/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="full direction_row">
    <view class="layout layout-warp touch-page">
      <view class="layout-sider d-none d-lg-block">
        <Sider></Sider>
      </view>
      <view class="layout-content">
        <Header class="layout-header" v-model="sideModel"></Header>

        <view class="layout">
          <view class="chat-window full align-items_stretch">
            <view class="sider-bar d-none d-lg-block"  >
              <view class="chat-warp" v-if="sideModel === 'home'" :style="{ width: boxWidth + 'px' }"  >
                <div class="tabs">
                  <div
                    class="tab-bar"
                    :class="{ active: current === 'All' }"
                    @click="handleClick('All')"
                  >
                    {{ $t('chats.types.all') }}
                  </div>
                  <div
                    class="tab-bar"
                    :class="{ active: current === 'Starred' }"
                    @click="handleClick('Starred')"
                  >
                    {{ $t('chats.types.starred.title') }}
                  </div>
                  <div
                    class="tab-bar"
                    :class="{ active: current === 'Toolkit' }"
                    @click="handleClick('Toolkit')"
                  >
                    {{ $t('chats.types.toolkit.title') }}
                  </div>
                </div>

                <div class="tab-context">
                  <ChatHistory
                    v-if="current === 'All'"
                    :archive="0"
                    class="chat-history"
                  ></ChatHistory>

                  <ChatHistory
                    v-if="current === 'Starred'"
                    :archive="1"
                    class="chat-history"
                  ></ChatHistory>
                  <ToolSet  v-if="current === 'Toolkit'"></ToolSet>
                </div>

                <view class="chat-line" @mousedown="onMouseDown"></view>
              </view>

              
              <Charts v-if="sideModel === 'charts'"></Charts>
              <Store v-if="sideModel === 'store'"></Store>
            </view>

            <view class="full">
              <Conversation v-if="isInRoom"></Conversation>
              <ZeroState v-if="!isInRoom && !sending"></ZeroState>
              <InputArea class="input-area-warp"></InputArea>
            </view>
           
          </view>
        </view>
      </view>
    </view>

    <!-- <TabBar route="app"></TabBar> -->
  </view>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  ref,
  watch,
  computed,
} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {
  Sider,
  Header,
  Conversation,
  ZeroState,
  InputArea,
  ChatHistory,
  TabBar,
} from '@/components';
import useChatStore from '@/store/modules/chat';
import useInstructionStore from '@/store/modules/instruction';
import { base64 } from '@/utils/encipher';
import Store from '@/components/store/index.vue';
import Charts from '@/components/charts/index.vue';
import ToolSet from '@/components/ToolSet/index';
import useUserStore from '@/store/modules/user';
import { navigateTo } from '@/utils/uni';

export default defineComponent({
  name: 'App',
  components: {
    Sider,
    Header,
    Conversation,
    ZeroState,
    InputArea,
    ChatHistory,
    Store,
    Charts,
    TabBar,
    ToolSet,

  },
  setup() {
    const chatStore = useChatStore();
    const userStore = useUserStore();
    const instructionStore = useInstructionStore();

    const isInRoom = computed(() => (chatStore.currentRoom ? true : false));
    const sending = computed(() => chatStore.sending);
    const sideModel = ref('home');

    const instance = getCurrentInstance();
    const open = () => {
      popup.open(instance);
    };

    onLoad(() => {
      userStore.getUserInfo();
      instructionStore.getTopInstructionList();
      
      if (chatStore.currentRoom) {
        chatStore.getConversationsById({ roomId: chatStore.currentRoom.id });
      }
    });

    const current = ref('All');
    const handleClick = type => {
      current.value = type;
    };


    const boxWidth = ref(280);
    const startX = ref(0);
    const startWidth = ref(0); 


    const onMouseMove = (event) =>{
      const newWidth = startWidth.value + (event.clientX - startX.value);
      boxWidth.value = Math.max(newWidth, 100); 
    }

    const onMouseUp = ()=> {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    }


    const onMouseDown = (event) => {
      startX.value = event.clientX;
      startWidth.value = boxWidth.value;
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    }


    

    return {
      sideModel,
      sending,
      isInRoom,
      open,
      navigateTo,
      current,
      handleClick,
      boxWidth,
      onMouseDown
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.layout {
  display: flex;
  & > .layout-sider {
    height: 100%;
  }
  & > .layout-content {
    flex: 1;
    height: 100%;
  }

  $header-height: 54px;
  .layout-header {
    height: $header-height;
  }
  .layout-header + .layout {
    height: calc(100% - $header-height);
    // height: 100%;
  }
}

// .page-content {
//   padding: map-get($spaces, sm);
// }

.input-area-warp {
  position: absolute;
  // bottom: map-get($spaces, sm);
  // left: map-get($spaces, sm);
  // right: map-get($spaces, sm);
  bottom: 0;
  left: 0;
  right: 0;
}

.chat-window {
  background: #f7f7f7;
  border-top-left-radius: map-get($radii, lg);
  border-top-right-radius: map-get($radii, lg);
}

.sider-bar {

  border-right: solid 1px map-get($border-colors, darker);
}

.b_red {
  border: solid 1px red;
}
.b_green {
  border: solid 1px green;
}
.b_yellow {
  border: solid 1px yellow;
}
.b_rebeccapurple {
  border: solid 1px rebeccapurple;
}
.b_aqua {
  border: solid 1px aqua;
}
.b_darkblue {
  border: solid 1px darkblue;
}
.b_cadetblue {
  border: solid 1px cadetblue;
}

.layout-warp {
}

.tab-bar {
}

.chat-warp {
  // background: #cccccc;
  // border-radius: $radius;
  position: relative;
  width: 280px;
  height: 100%;
  .tabs {
    box-sizing: border-box;
    height: 42px;
    background: $white-color;
    padding: map-get($spaces, xs);
    .tab-bar {
      cursor: pointer;
      display: inline-block;
      margin: 0 map-get($spaces, xs);
      padding: 0 map-get($spaces, sm);

      border-radius: $radius;

      line-height: 1.6;
    }
    .tab-bar.active {
      background: map-get($theme-colors, primary);
      color: $white-color;
    }
  }

  .tab-context {
    // margin-top: $radius;
    height: calc(100% - 42px);
  }
}

.chat-line {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: solid 2px #ededed;
  
}
.chat-line:hover {
  cursor: w-resize;
}
</style>

<!-- 
title的修改、
前端限制高度、
更新问题、
手机号绑定、
订阅功能、
商城和排行榜的删除
翻译错误、

查看图片、删除功能、
个人logo、
手机号绑定、
订阅功能、

会议还讨论了翻译错误、
支付功能和订阅链接的问题。 -->
